import React, { Component } from "react";
class Iphone14 extends Component {
    render() {
        return <div>Iphone14 {this.props.color}</div>;
    }
}

class Iphone14Pro extends Component {
    render() {
        return <div>Iphone14Pro {this.props.color}</div>;
    }
}
// 高阶组件函数约定用with开头
// 入参： 基础组件
// 返回值：包装后的组件
// 高阶组件是什么？
// 1. 高阶组件是一种设计模式，包装模式
// 2. 高阶组件入参基础组件，返回值是包装后的组件
// 3. 作用：逻辑复用
// 4. 高阶组件通常适用于类组件
function withWrapper(Iphone14) {
    // 包装组件
    class Wrapper extends React.Component {
        componentDidMount() {
            console.log("我是手机壳，我给你提供了保护功能");
        }
        state = {
            color: "白色",
        };
        render() {
            return <Iphone14 color={this.state.color}></Iphone14>;
        }
    }

    return Wrapper;
}
export default withWrapper(Iphone14); // 包装后的组件
